<template>
  <section>
    <section class="filter-bar mb-16">
      <a-alert
        message="平台只能修改分配的超级管理员信息，不能调整其他服务商管理员的信息"
        type="info"
        show-icon
      />
    </section>
    <a-table
      class="table-con"
      row-key="id"
      :loading="loading"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
    >
      <template #storeList="storeList, data">
        <template v-if="data.isSystemUser">
          <span style="color:#999">全部门店，无法修改</span>
        </template>
				<section v-else class="flex items-center" style="justify-content:center;">
					<a-tag :color="$store.getters.color" v-for="item in storeList.slice(0, 3)" :key="item.storeName">
						<a-tooltip :title="item.storeName">
							<section style="max-width: 120px;" class="overflow">{{ item.storeName }}</section>
						</a-tooltip>
					</a-tag>
					<a-popover v-if="storeList.length > 3" title="门店列表">
						<section slot="content" style="width: 300px; max-height: 300px; overflow: auto">
							<p v-for="item in storeList" :key="item.storeId">{{ item.storeName }}</p>
						</section>
						<a class="flex-shrink-0" href="javascript:;">更多</a>
					</a-popover>
				</section>
<!--				<a-tag color="#108ee9" v-for="item in val" class="mr-10 mt-2 mb-2">-->
<!--					{{item.storeName}}-->
<!--				</a-tag>-->
			</template>
      <template #action="val,data">
        <template v-if="$permissionJudge('VendorResetAdminPwd')&&data.isSystemUser">
          <a href="javascript:" class="mr-10" @click="resetPassword(data)">
            重置密码
          </a>
        </template>
        <a href="javascript:" @click="loginLog(data)">
          登录日志
        </a>
      </template>
    </a-table>
    <LoginLog ref="loginLogDom"></LoginLog>
  </section>
</template>
<script>
  import {tableMixins} from '@/utils/mixins'
  import {getVendorAdminUserPage, resetAdminPwd} from '@/api/vendor'
  import LoginLog from './LoginLog'

  export default {
    name: 'AdminList',
    mixins: [tableMixins],
    components: {LoginLog},
    props: {
      id: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        labelCol: {span: 8},
        wrapperCol: {span: 16},
        showModal: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        loading: false,
        customerName: undefined,
        pageNum: 1,
        rowsNum: 10,
        columns: [
          {dataIndex: 'account', title: '账号名', align: 'center'},
          {
            dataIndex: 'storeList',
            title: '管理门店',
            align: 'center',
            scopedSlots: {customRender: 'storeList'},
            width: '50%'
          },
          {dataIndex: 'phone', title: '联系方式', align: 'center'},
          {dataIndex: 'action', align: 'center', title: '操作', scopedSlots: {customRender: 'action'}}
        ],
        data: []
      }
    },
    created() {
      this.getData()
    },
    methods: {
      loginLog(data){
        this.$refs.loginLogDom.onLoad(data)
      },
      resetPassword(data) {
        this.$confirm({
          title: '确定要重置密码吗？',
          content: `确定要重置【${data.account}】密码吗？`,
          onOk: () => {
            resetAdminPwd({userId: data.id}).then(res => {
              const h = this.$createElement
              this.$success({
                title: '密码重置成功',
                content: h('div', {}, [
                  h('p', data.account + '密码已重置成功，重置密码短信已经发送至该管理员手机！重置后的密码为123qwe')
                ])
              })
            })

          }
        })
      },
      orderValidator(rule, value, callback) {
        const amount = value && value.trim()
        const isAmount = /^([1-9]\d*|[0]{1,1})$/
        if (amount === '') {
          callback()
        }
        if (amount && !isAmount.test(amount)) {
          callback(new Error('请输入数字'))
        } else {
          callback()
        }
      },
      amountValidator(rule, value, callback) {
        const amount = value && value.trim()
        const isAmount = /^(\+)?\d+(\.\d{1,2})?$/
        if (amount === '') {
          callback()
        }
        if (amount * 1 === 0 || amount && !isAmount.test(amount)) {
          callback(new Error('请输入正数且保留两位小数'))
        } else {
          callback()
        }
      },
      confirmOk() {
        this.form.validateFields((err, values) => {
          if (!err) {
            const {id} = this
            const {orderId} = values //暂停
            const {balanceAmount, creditAmount} = values
            if (!balanceAmount && !creditAmount) return this.$message.warning('请填写金额或授信金额！')
            addVendorBill({
              vendorId: id, ...this.$utils.trimValue(values),
              creditAmount: creditAmount ? creditAmount : undefined,
              balanceAmount: balanceAmount ? balanceAmount : undefined,
            }).then(() => {
              this.$message.success('新建成功！')
              this.$emit('upload')
              this.getData()
              this.cancel()
            })
          }
        })
      },
      search() {
        this.pageNum = 1
        this.getData()
      },
      reset() {
        this.time = undefined
        this.times = undefined
        this.search()
      },
      getData() {
        this.loading = true
        const {rowsNum, pageNum, id} = this
        getVendorAdminUserPage({
          vendorId: id,
          rowsNum, pageNum
        }).then(res => {
          const {items, rowCount} = res
          this.data = items
          this.total = rowCount
        }).finally(() => {
          this.loading = false
        })
      },
      cancel() {
        this.confirmLoading = false
        this.form.resetFields()
        this.showModal = false
      }
    }
  }
</script>
<style lang="less" scoped>
  .table-con {
    /deep/ .ant-table-thead > tr > th, /deep/ .ant-table-tbody > tr > td {
      padding: 8px;
    }
  }
</style>
